<template>
    <div class="content" v-if="dailydata!==null">
        <!-- 展开面板 -->
        <div :class="{zhankai_info:true,zhankai_info_z:is_zhankai}">
            <div style="position: relative;">
                <div style="margin-top: 12px;margin-left: 40px;color:#9B9B9B">共30题，已回答<span style="color:#3F8CFD">24</span>题，已收藏<span style="color:#00C16A">15</span>题</div>
                <div @click="is_zhankai=false" style="position: absolute;top:-2px;left:910px;color: #9B9B9B;font-size: 18px;cursor: pointer;">&lt;&lt; 收起</div>
            </div>
            <!-- 头像姓名 -->
            <div style="height: 90px;background: #F5F5F5;margin-top: 14px;position: relative;">
                <div class="head_img"></div>
                <div class="username">姓名：VK</div>
            </div>
            <!-- 题号区域 -->
            <div class="zhankai_no">
                <div class="tihao" v-for="(item,index) in max_exam" :key="index" @click="tihao_num=index;emptyOptionNum()" :class="{tihao_cur:tihao_num==index}" style="margin:18px 11px">
                    {{item}}
                    <div v-if="answer_res[index]==false && !is_preview" :class="{answer_state:true,answercur:option_cur[index]}">{{option_cur[index]?'已答':'未答'}}</div>
                    <div v-if="answer_res[index] && !is_preview" class="res_icon">
                        <img style="width:24px;height:24px;position: absolute;top:0;left:0" :src="answer_parse[index]==undefined?'/img/dui.png':'/img/cuo.png'">
                    </div>
                </div>
            </div>
            <!-- 提交和返回 -->
            <div class="submit_btn">
                <div style="color: #4B555E;" @click="is_zhankai = false">返回</div>
                <div style="color: #FFFFFF;background: #3F8CFD;" v-show="!is_preview">提交</div>
            </div>
        </div>
        <!-- 面包屑 -->
        <div class="banner">
            <div>
                <div>答题 &nbsp;&nbsp;></div>
                <div>每日一练 &nbsp;&nbsp;></div>
                <div>通史 &nbsp;&nbsp;></div>
                <div>初中 &nbsp;&nbsp;></div>
            </div>
        </div>
        <!-- 答题区域 -->
        <div class="exam_area">
            <!-- 题号 -->
            <div class="exam_no">
                <div class="zhankai" @click="is_zhankai=true">展开 &gt;&gt;</div>
                <div style="height: 1px;background: #EEEEEE;"></div>
                <div class="select_exam">
                    <div class="tishu">{{tihao_num+1}}/{{max_exam}}题</div>
                    <div class="tihao" v-for="(item,index) in max_exam" :key="index" @click="tihao_num=index;emptyOptionNum()" :class="{tihao_cur:tihao_num==index}">
                        {{item}}
                        <div v-if="answer_res[index]==false && !is_preview" :class="{answer_state:true,answercur:option_cur[index]}">{{option_cur[index]?'已答':'未答'}}</div>
                        <div v-if="answer_res[index] && !is_preview" class="res_icon">
                            <img style="width:24px;height:24px;position: absolute;top:0;left:0" :src="answer_parse[index]==undefined?'/img/dui.png':'/img/cuo.png'">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 作答区 -->
            <div class="answer_area">
                <div class="exam_category">
                    <div style="width: 2px;height: 17px;background: #3F8CFD;"></div>
                    <div>{{tihao_num+1}}、{{dailydata[tihao_num].topic_type==1?'单选题':dailydata[tihao_num].topic_type==2?'多选题':'填空题'}}</div>
                    <div :class="{collcur:is_collection[tihao_num]}" @click="collection">{{is_collection[tihao_num]?'取消收藏':'立即收藏'}}</div>
                    <div>纠错</div>
                </div>
                <!-- 题目 -->
                <div class="exam_title">
                    {{dailydata[tihao_num].topic}}
                </div>
                <!-- 选项 -->
                <!-- 单选 -->
                <div style="margin-left: 28px;margin-top: 40px;" v-if="dailydata[tihao_num].topic_type==1 && !is_preview">
                    <div class="option_area" v-for="(item,index) in dailydata[tihao_num].answer_contents"
                    :key="index" :data-answerzid="item.zid" @click="option_num=index;optionCur($event)">
                        <div :class="{option_num_cur:option_num==index,option_num:true}" :data-answerzid="item.zid">
                            {{item.answer_tag}}
                        </div>
                        <div :class="{option_content:true,option_content_cur:option_num==index}" :data-answerzid="item.zid">
                            {{item.answer_content}}
                        </div>
                    </div>
                </div>

                <div style="margin-left: 28px;margin-top: 40px;" v-if="dailydata[tihao_num].topic_type==1 && is_preview">
                    <div class="option_area" v-for="(item,index) in dailydata[tihao_num].answer_contents"
                    :key="index">
                        <div :class="{option_num_cur:item.right_answer,option_num:true}" :data-answerzid="item.zid">
                            {{item.answer_tag}}
                        </div>
                        <div :class="{option_content:true,option_content_cur:item.right_answer}" :data-answerzid="item.zid">
                            {{item.answer_content}}
                        </div>
                    </div>
                </div>

                <!-- 解析 -->
                <div v-if="answer_res[tihao_num] && dailydata[tihao_num].topic_type==1" :class="{answer_parse:true,answer_parse_cur:parse_status}">
                    <div style="font-size: 16px;font-weight: 400;color: #4A5566;">
                        正确答案：<span v-for="(item,index) in right_answer[tihao_num]" :key="index">{{item.answer_tag}}</span>
                    </div>
                    <div style="font-size: 16px;font-weight: 400;color: #3F8CFD;margin-top: 20px;cursor: pointer;user-select: none;" @click="parse_status=!parse_status">
                        查看解析<img :src="parse_status?'/img/shang.png':'/img/xia.png'">
                    </div>
                    <div v-show="parse_status" style="margin-top: 20px;width:840px;font-size: 16px;color: #4A5566;line-height: 35px;">
                        {{answer_parse[tihao_num]}}
                    </div>
                </div>

                <!-- 多选 -->
                <div style="margin-left: 28px;margin-top: 40px;" v-if="dailydata[tihao_num].topic_type==2">
                    <div class="option_area" v-for="(item,index) in dailydata[tihao_num].answer_contents"
                    :key="index" :data-answerzid="item.zid" @click="option_num=index;optionDduoCur($event)">
                        <div :class="{option_num_cur:option_duo[tihao_num][index],option_num:true}" :data-answerzid="item.zid">
                            {{item.answer_tag}}
                        </div>
                        <div :class="{option_content:true,option_content_cur:option_duo[tihao_num][index]}" :data-answerzid="item.zid">
                            {{item.answer_content}}
                        </div>
                    </div>
                </div>
                <!-- 解析 -->
                <div v-if="answer_res[tihao_num] && dailydata[tihao_num].topic_type==2" :class="{answer_parse:true,answer_parse_cur:parse_status}">
                    <div style="font-size: 16px;font-weight: 400;color: #4A5566;">
                        正确答案：<span v-for="(item,index) in right_answer[tihao_num]" :key="index">{{item.answer_tag}}</span>
                    </div>
                    <div style="font-size: 16px;font-weight: 400;color: #3F8CFD;margin-top: 20px;cursor: pointer;user-select: none;" @click="parse_status=!parse_status">
                        查看解析<img :src="parse_status?'/img/shang.png':'/img/xia.png'">
                    </div>
                    <div v-show="parse_status" style="margin-top: 20px;width:840px;font-size: 16px;color: #4A5566;line-height: 35px;">
                        {{answer_parse[tihao_num]}}
                    </div>
                </div>
                <!-- 填空 -->
                <!-- <div style="margin-left: 28px;margin-top: 40px;" v-if="dailydata[tihao_num].topic_type==3">
                    <div class="option_area" v-for="(item,index) in dailydata[tihao_num].answer_contents"
                    :key="index" :data-answerzid="item.zid" @click="option_num=index;optionDduoCur($event)">
                        {{index+1}}: <input type="text" class="tiankong">
                    </div>
                </div> -->
                <div class="rencreate" @click="returnCreate" v-show="is_preview">返回</div>
                <div :class="{exam_up:true,noclick_cur:tihao_num==0}" @click="previousExam">上一题</div>
                <div :class="{exam_down:true,noclick_cur:tihao_num==(max_exam-1)}" @click="nextExam">下一题</div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        mounted() {
            //初始化数据
            this.dailydata = this.$route.query.dailydata.examination_paper_topic_list
            this.is_preview = this.$route.query.is_preview
            this.practice_type = this.$route.query.practice_type*1
            this.answer_obj.practice_type = this.practice_type
            this.max_exam = this.dailydata.length
            for(let i=0;i<this.max_exam;i++){
                this.option_cur.push(false)
                this.answer_list.push(undefined)
                this.is_collection.push(this.dailydata[i].collect)
                this.option_duo.push([false])
                this.answer_arr.push(undefined)
                this.answer_parse.push(undefined)
                this.answer_res.push(false)
                this.right_answer.push(undefined)
            }
            if(this.is_preview){
                for(let i=0;i<this.max_exam;i++){
                    this.answer_res.push(true)
                }
            }
            //console.log(this.dailydata)
            //console.log(this.is_collection)
            //console.log(this.practice_type)
        },
        data() {
            return {
                dailydata:null,
                max_exam:10,
                tihao_num:0,
                option_num:undefined,
                practice_type:undefined,
                //选项是否选中
                option_cur:[],
                //答案
                answer_list:[],
                //展开面板
                is_zhankai:false,
                //收藏状态组
                is_collection:[],
                //多选选项状态
                option_duo:[],
                //答案组
                answer_arr:[],
                // 答案结构
                answer_obj:{
                    examination_paper_topic_zid:'',
                    user_submit_answers:[],
                    practice_type:null
                },
                // 答案解析组
                answer_parse:[],
                // 对错图标状态组
                answer_res:[],
                //正确答案组
                right_answer:[],
                //解析的显示与隐藏
                parse_status:false,
                // 是否是预览状态
                is_preview:false,
            }
        },

        methods:{
            //数组中某个元素的下标
            getArrayIndex(arr,obj){
            for(let i=0;i<arr.length;i++){
                if(arr[i].answers_zid==obj){
                    //console.log('判断过程-------',arr[i].answers_zid,obj)
                    return i;
                    }
                }
                return -1;
            },
            //单选是否已答  保存单选答案
            optionCur(e){
                this.option_cur[this.tihao_num]=true
                this.answer_list[this.tihao_num] = this.option_num
                let answerzid = e.target.dataset.answerzid
                //console.log(answerzid)
                this.answer_obj.examination_paper_topic_zid = this.dailydata[this.tihao_num].zid
                this.answer_obj.user_submit_answers[0]={answers_zid:answerzid}
                this.answer_arr[this.tihao_num] = this.answer_obj
                //console.log(this.answer_arr[this.tihao_num])
            },
            //多选题是否已答 保存多选答案
            optionDduoCur(e){
                let answerzid = {answers_zid:e.target.dataset.answerzid}
                //console.log(this.answer_obj.user_submit_answers,answerzid.answers_zid)
                let n = this.getArrayIndex(this.answer_obj.user_submit_answers,answerzid.answers_zid)
                //console.log(answerzid,n)
                if(this.option_duo[this.tihao_num][this.option_num]){
                    //this.option_duo[this.tihao_num][this.option_num] = false
                    this.$set(this.option_duo[this.tihao_num],this.option_num,false)
                    if(n>-1){
                        this.answer_obj.user_submit_answers.splice(n,1)
                    }
                }else{
                    //this.option_duo[this.tihao_num][this.option_num] = true
                    this.$set(this.option_duo[this.tihao_num],this.option_num,true)
                    if(n==-1){
                        this.answer_obj.user_submit_answers.push(answerzid)
                    }
                }
                //console.log(this.option_duo[this.tihao_num][this.option_num])
                this.answer_obj.examination_paper_topic_zid = this.dailydata[this.tihao_num].zid
                this.answer_arr[this.tihao_num] = this.answer_obj
                //console.log(this.answer_arr[this.tihao_num])
            },
            previousExam(){
                if(this.tihao_num>0){
                    this.tihao_num--
                    //单选状态
                    if(this.answer_list[this.tihao_num]==undefined){
                        this.option_num = undefined
                    }else{
                        this.option_num = this.answer_list[this.tihao_num]
                    }
                    
                    //多选状态
                }else{
                    return;
                }
            },
                //验证题目答案
                verifyAnswer(data){
                    let url = 'http://121.89.232.163/api/exarcisek/v1/verify_the_answer/'
                    axios.post(url,data,{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        this.$set(this.answer_res,this.tihao_num,true)
                        let right = []
                        res.data.data.rep_answers_status.forEach(item => {
                            if(item.right_answer){
                                right.push(item.answer_tag)
                            }
                        })
                        let right_data = [...new Set(right)]
                        let rightdata = []
                        right_data.forEach(item=>{
                            rightdata.push({answer_tag:item})
                        })
                        this.$set(this.right_answer,this.tihao_num,rightdata)
                        if(res.data.code==1){
                                if(this.tihao_num<this.max_exam-1){
                                    this.tihao_num++
                                if(this.answer_list[this.tihao_num]==undefined){
                                    this.option_num = undefined
                                }else{
                                    this.option_num = this.answer_list[this.tihao_num]
                                }
                                }else{
                                    return;
                                }
                        }else{
                            this.answer_parse[this.tihao_num]=res.data.data.answer_parse
                        }
                    })
                },
            nextExam(){
                if(this.answer_parse[this.tihao_num]==undefined && this.answer_arr[this.tihao_num]!=undefined){
                    let answer_data = this.answer_arr[this.tihao_num]
                    //console.log(answer_data)
                    //验证答案
                    this.verifyAnswer(answer_data)
                }else{
                    if(this.tihao_num<this.max_exam-1){
                    this.tihao_num++
                    if(this.answer_list[this.tihao_num]==undefined){
                        this.option_num = undefined
                    }else{
                        this.option_num = this.answer_list[this.tihao_num]
                    }
                    }else{
                        return;
                    }
                }
            },
            // 获取选项和收藏状态
            emptyOptionNum(){
                this.is_zhankai = false
                if(this.answer_list[this.tihao_num]==undefined){
                    this.option_num = undefined
                }else{
                    this.option_num = this.answer_list[this.tihao_num]
                }
                //多选
                if(this.dailydata[this.tihao_num].topic_type==2){
                    let max = this.dailydata[this.tihao_num].answer_contents.length-1
                    if(this.option_duo[this.tihao_num].length==1){
                        for(let i=0;i<max;i++){
                            this.option_duo[this.tihao_num].push(false)
                        }
                    }
                    //console.log(this.option_duo[this.tihao_num][0])
                }
            },
            //收藏和取消收藏
            collection(){
                let examination_paper_topic_zid = this.dailydata[this.tihao_num].zid
                //console.log(examination_paper_topic_zid,typeof(examination_paper_topic_zid))
                if(!this.is_collection[this.tihao_num]){
                    let url = 'http://121.89.232.163/api/personal-center/v1/collection_examination/'
                    axios.post(url,{examination_paper_topic_zid},{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        //console.log(res)
                        if(res.data.code==1){
                            this.$set(this.is_collection,this.tihao_num,true)
                        }
                    })
                }else{
                    let url = 'http://121.89.232.163/api/personal-center/v1/cancel_collection_examination/'
                    axios.post(url,{examination_paper_topic_zid},{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        //console.log(res)
                        if(res.status==200){
                            this.$set(this.is_collection,this.tihao_num,false)
                        }
                    })
                }
            },
            returnCreate(){
                this.$router.push('/create')
            },
        }
    }
</script>

<style src="../assets/css/reset.css">
    
</style>
<style scoped>
.content{
    position: relative;
    width: 1200px;
    margin: auto;
    overflow: hidden;
}
.banner{
    width: 1200px;
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #DEDEDE;
    padding-top: 1px;
    margin-bottom: 1px;
}
.banner>div{
    margin-left: 40px;
    margin-top: 20px;
}
.banner>div>div{
    display: inline-block;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 22px;
    margin-right: 15px;
}
.exam_area{
    width: 1200px;
    height: 940px;
    display: flex;
    box-shadow: 0px 2px 4px 0px #DEDEDE;
}
.exam_no{
    width: 240px;
    height: 100%;
    margin-right: 1px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #DEDEDE;
}
.answer_area{
    position: relative;
    width: 959px;
    height: 100%;
    background-color: #FFFFFF;
}
.zhankai{
    width: 100%;
    height: 45px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9B9B9B;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.select_exam{
    width: 100%;
    height: 893px;
    overflow: auto;
}
.tishu{
    height: 33px;
    margin-top: 23px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7D8695;
    line-height: 28px;
}
.tihao{
    position: relative;
    width: 75px;
    height: 75px;
    background: #EEF4FE;
    border: 1px solid #3F8CFD;
    margin: auto;
    margin-bottom: 20px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3F8CFD;
    line-height: 75px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
.tihao_cur{
    background: #3F8CFD;
    color: #FFFFFF;
}
.res_icon{
    position: absolute;
    width: 24px;
    height: 24px;
    top: 63px;
    left: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 0;
}
.answer_state{
    position: absolute;
    width: 38px;
    height: 18px;
    background: #FFFFFF;
    border: 1px solid #F75251;
    border-radius: 9px;
    top: 65px;
    left: 17px;
    width: 38px;
    height: 18px;
    background: #FFFFFF;
    border: 1px solid #F75251;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F75251;
    line-height: 18px;
    z-index: 20;
}
.answercur{
    background:#F75251;
    color:#FFFFFF;
}
.exam_category{
    width: 899px;
    margin-left: 28px;
    margin-top: 22px;
}
.exam_category>div{
    display: inline-block;
}
.exam_category>div:nth-child(2){
    height: 28px;
    width: 105px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #27364E;
    line-height: 28px;
    margin-left: 12px;
    margin-right: 590px;
}
.exam_category>div:nth-child(3){
    width: 95px;
    height: 30px;
    border: 1px solid #DBE0E4;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 30px;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
    user-select: none;
}
.exam_category>div:nth-child(4){
    width: 68px;
    height: 30px;
    border: 1px solid #DBE0E4;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.collcur{
    background: rgba(63,140,253,0.05);
    border: 1px solid rgba(63,140,253,0.3);
    color:  #3F8CFD !important;
}
.exam_title{
    width: 899px;
    height: 219px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 35px;
    margin-top: 10px;
    margin-left: 28px;
    word-wrap: break-word;
}
.option_area{
    position: relative;
    margin-bottom: 23px;
}
.option_area>div{
    display: inline-block;
}
.option_num{
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #979797;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #979797;
    line-height: 26px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.option_content{
    margin-left: 50px;
    width: 443px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 28px;
    word-wrap: break-word;
    cursor: pointer;
    user-select: none;
}
.option_num_cur{
    color: #FFFFFF;
    background: #3F8CFD;
}
.option_content_cur{
    color: #3F8CFD;
}
.exam_up{
    position: absolute;
    top: 800px;
    left: 780px;
    width: 68px;
    height: 30px;
    border: 1px solid #DBE0E4;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    user-select: none;
}
.exam_down{
    position: absolute;
    top: 800px;
    left: 870px;
    width: 68px;
    height: 30px;
    border: 1px solid #DBE0E4;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    user-select: none;
}
.noclick_cur{
    border: 1px solid #DCDFE6;
    color: #C0C4CC;
    cursor: default;
}
.zhankai_info{
    width: 1030px;
    height: 941px;
    background: #FFFFFF;
    position: absolute;
    top: 62px;
    left: -1030px;
    z-index: 25;
    transition: 0.7s;
}
.zhankai_info_z{
    left: 0;
}
.zhankai_info_s{
    left: -1030px;
}
.head_img{
    position: absolute;
    width: 54px;
    height: 54px;
    background: red;
    border-radius: 50%;
    top: 19px;
    left: 39px;
}
.username{
    position: absolute;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    top: 35px;
    left: 114px;
}
.zhankai_no{
    margin-top: 65px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.submit_btn{
    margin-top: 70px;
    display: flex;
    justify-content: space-around;
}
.submit_btn>div{
    width: 137px;
    height: 40px;
    border: 1px solid #DBE0E4;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.answer_parse{
    width: 860px;
    height: 100px;
    background: #F5F5F5;
    margin-left: 75px;
    padding-top: 14px;
    padding-left: 23px;
    transition: 0.5s;
    overflow: auto;
}
.answer_parse_cur{
    height: 200px;
}
.rencreate{
    width: 68px;
    height: 30px;
    border: 1px solid #DBE0E4;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 800px;
    left: 50px;
}
/* .tiankong{
    border: 1px solid rgb(191,191,191);
    font-size: 16px;
    height: 30px;
    width: 100px;
    border-radius: 5%;
    transition: 0.5s;
}
.tiankong:focus{
    border-color: #66afe9;
    outline: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    width: 250px;
} */
</style>